<template>
	<view class="content">
		<view class="topic-bg">
			<view class="bg"></view>
		</view>
		<view class="contact">
			<view class="title">
				{{i18n.f_exchange}}
			</view>
			<view class="exchage-content">
				<view class="exchange-title">
					{{i18n.rate}} {{rate}}
					
					<view class="exchange-title-btn" @tap.stop="exchange">
						{{i18n.exchangeText}}
					</view>
				</view>
				
				<view class="echange-switch-info">
					<view class="echange-switch-info-item">
						<view class="item-left">
							<image :src="fromeImage" mode=""></image>
							{{fromeName}} ({{i18n.AvailableBalance}} {{fromeYuE}})
						</view>
						<view class="item-right">
							<input type="number" value="" :placeholder="i18n.NumberOfTransfers" placeholder-style="text-align:center;color:#A0A0A0;font-size:22upx;"  v-model="fromeNUmber" @input="fromeFunc"/>
						</view>
					</view>
					
					<view class="echange-switch-info-item">
						<view class="item-left">
							<image :src="toImage" mode=""></image>
							{{toName}} ({{i18n.AvailableBalance}} {{toYuE}})
						</view>
						<view class="item-right">
							<input type="number" value="" :placeholder="i18n.ReceivedQuantity" placeholder-style="text-align:center;color:#A0A0A0;font-size:22upx;" v-model="total" disabled="true"/>
						</view>
					</view>
				</view>
				<view class="bili">
					<view class="">
						{{i18n.WithdrawalFee}}
					</view>
					<text>{{fee}} {{fromeName}} </text>
				</view>
				<view class="bili">
					<view class="">
						{{i18n.ActualAmount}}
					</view>
					<text>≈ {{total}} {{toName}}</text>
				</view>
				<view class="paypwd">
					<view class="title">
						{{i18n.paypwd}}
					</view>
					<view class="item-input">
						<input :type="ispaypwd?'number':'password'" maxlength="6" value="" v-model="paypwd" :placeholder="i18n.p_paypwd"/>
						<view class="items" @tap="afunc">
							<uni-icon
							type="eye"
							:color="ispaypwd?'#007AFF':'#999999'" 
							size="16"></uni-icon>
						</view>
					</view>
				</view>
				<view class="exchange-btn">
					<view class="btn" hover-class="active" @tap.stop="getExhange">
						<i class="iconfont icon-shandian"></i> {{i18n.QuickRedemption}}
					</view>
				</view>
			</view>
			
			<view class="list-content-title">
				{{i18n.RecentlyRedeemed}}
			</view>
			<view class="list-content">
				
				<block v-for="(item,index) in list" :key="index">
					<view class="list">
						<view class="item-left">
							<view class="">
								{{item.amount}}{{item.typeStr}} {{i18n.exchanges}} {{item.num}} {{item.hash}}
							</view>
							<text>{{item.time}}</text>
						</view>
						<view class="item-right active" >
							<uni-icon
							type="checkbox-filled" 
							color="#007AFF" 
							size="16"></uni-icon> {{i18n.exchange_success}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	import Load from '../../components/common/load.vue';
	import {fetch, showToast, pageto} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang'
			]),
			rate(){
				return (parseInt((this.fromPrice/this.toPrice)*1000000))/1000000;
			}
		},
		components:{
			uniIcon,Load
		},
		data() {
			return {
				showLoad:false,
				fee:0,
				fees:'',
				total:0,
				ispaypwd:false,
				paypwd:'',
				fromeName:'',
				fromeImage:'',
				fromTokenid:'',
				fromeNUmber:'',
				fromPrice:'',
				toName:'',
				toTokenid:'',
				toPrice:'',
				toNumber:'',
				toImage:'',
				fromeYuE:'',
				toYuE:'',
				page:1,
				list:[],
				lists:[],
				isclick:false
			};
		},
		onLoad(){
			if(!this.getLoginInfo.paypwd){
				uni.navigateTo({
					url:'/pages/modify-pwd/modify-pwd'
				})
			}
			this.getToken();
			this.getList();
		},
		onReachBottom(){
			//触底加载更多
			this.getAddressLists() 
		},
		onPullDownRefresh(){
			//上拉刷新
			this.page = 1;
			this.list = [];
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		methods:{
			exchange(){
				return
				this.fromeNUmber ='';
				this.toNumber ='';
				this.total = 0;
				if(this.fromTokenid == 3){
					this.lists.forEach((item,index)=>{
						if(this.lists[index].id == 1){
							this.fromeName = item.title_en;
							this.fromTokenid = item.id;
							this.fromeYuE = item.balance+'';
							this.fromeImage = item.logo;
							this.fromPrice = parseFloat(item.price)?item.price:1;
							this.fees = item.sd_sxf.indexOf('%')? (item.sd_sxf.replace(/\%/g, ""))/100 : item.sd_sxf;
							this.fee = (item.sd_sxf);
							console.log(this.fees);
						}else if(this.lists[index].id == 3){
							this.toName = item.title_en;
							this.toTokenid = item.id;
							this.toImage = item.logo;
							this.toYuE = item.balance+'';
							this.toPrice = item.price;
						}
					})
				}else if(this.fromTokenid == 1){
					this.lists.forEach((item,index)=>{
						if(this.lists[index].id == 1){
							this.toName = item.title_en;
							this.toTokenid = item.id;
							this.toYuE = item.balance;
							this.toPrice = item.price;
							this.toImage = item.logo;
						}else if(this.lists[index].id == 3){
							this.fromeName = item.title_en;
							this.fromTokenid = item.id;
							this.fromeYuE = item.balance;
							this.fromeImage = item.logo;
							this.fromPrice = parseFloat(item.price)?item.price:1;
							this.fees = item.sd_sxf.indexOf('%')>0? (item.sd_sxf.replace(/\%/g, ""))/100 : item.sd_sxf;
							this.fee = (item.sd_sxf);
						}
					})
				}
			},
			afunc(){
				this.ispaypwd = !this.ispaypwd;
			},
			fromeFunc(e){
				// this.toNumber = (e.detail.value)*this.rate;
				
				if(this.fromeNUmber==''&& this.fromeNUmber ==0){
					this.toNumber ='';
					this.total = 0;
					return
				}
				let thisfees = this.lists.filter((item,index)=>{
					return this.lists[index].id == this.fromTokenid
				})
				
				this.total = thisfees[0].sd_sxf.indexOf('%')>0?(e.detail.value*(1-this.fees))*this.rate:(e.detail.value-thisfees[0].sd_sxf)*this.rate;
				
				
				// console.log(thisfees[0].txsxf.indexOf('%'));
				// this.total = thisfees[0].txsxf.indexOf('%')>0?this.toNumber*(1-this.fees):this.toNumber-thisfees[0].txsxf;
			},
			getToken(){
				let url = this.getRequestUrl + '/api/Wallet/wallet_list';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(url, data, 'POST').then(res=>{
					this.showLoad = false;
					if(res.data.code==1){
						let list = res.data.data.list.filter((item,index)=>{
							return (item.status == 1)
						})
						// list.forEach((item,index)=>{
							
						// })
						this.lists = res.data.data.list;
						res.data.data.list.forEach((item,index)=>{
							if(res.data.data.list[index].id == 3){
								this.toName = item.title_en;
								this.toTokenid = item.id;
								this.toYuE = item.balance+'';
								this.toImage = item.logo;
								this.toPrice = item.price;
								
								
							}else if(res.data.data.list[index].id == 1){
								this.fromeName = item.title_en;
								this.fromTokenid = item.id;
								this.fromeYuE = item.balance+'';
								this.fromeImage = item.logo;
								this.fromPrice = parseFloat(item.price)?item.price:1;
								this.fees = item.sd_sxf.indexOf('%')? (item.sd_sxf.replace(/\%/g, ""))/100 : item.sd_sxf;
								this.fee = (item.sd_sxf);
							}
						})
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			getExhange(){
				if(this.isclick){
					return
				}
				if(this.fromeNUmber=='' && this.fromeNUmber==0 && !parseFloat(this.fromeNUmber)){
					showToast(this.i18n.p_enter_flashes_number)
					return
				}
				if(this.paypwd ==''){
					showToast(this.i18n.p_paypwd)
					return
				}
				this.isclick = true;
				this.showLoad = true;
				let url = this.getRequestUrl + '/api/Wallet/exchange2';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					token_x:this.fromTokenid,
					token_y:this.toTokenid,
					thenum:this.fromeNUmber,
					pay_pwd:this.paypwd
				}
				fetch(url,data,'POST').then(res=>{
					showToast(res.data.msg)
					this.isclick = false
					this.showLoad = false;
					this.fromeNUmber = '';
					this.toNumber = '';
					this.paypwd = '';
					this.total = 0;
					if(res.data.code==1){
						this.getToken();
						this.page = 1;
						this.list = [];
						this.getList();
					}
				}).catch(err=>{
					this.isclick = false
					this.showLoad = false;
					showToast(err.data.msg)
				})
			},
			getList(){
				let url = this.getRequestUrl + '/api/Wallet/echaglist';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					row:10,
					page:this.page
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					if(res.data.data.data.length==0){
						
						return
					}
					if(res.data.code ==1){
						this.list = res.data.data.data;
						this.page++;
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			getAddressLists(){
				let url = this.getRequestUrl + '/api/Wallet/echaglist';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					row:10,
					page:this.page
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					if(res.data.data.data.length==0){
						
						return
					}
					if(res.data.code ==1){
						this.list = this.list.concat(res.data.data.data);
						this.page++;
					}
				}).catch(err=>{
					this.showLoad = true;
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #eff3f7; 
	}
</style>
<style lang="scss">
	.content{
		.topic-bg{
			width: 100%;
			position: relative;
			overflow: hidden;
			z-index: -1;
			.bg{
				background-color: #007AFF;
				width: 100%;
				height: 420upx;
			}
		}
		.contact{
			margin-top:-340upx;
			.title{
				font-size: 32upx;
				text-align: center; 
				color: #FFFFFF;
				margin-bottom: 30upx;
			}
			.exchage-content{
				margin-top: 28upx;
				background-color: #FFFFFF;
				border-radius:10upx;
				margin:0 30upx;
				box-shadow: 2upx 2upx 20upx rgba(0,0,0,.2);
				.paypwd{
					padding:0 30upx;
					.title{
						line-height: 94upx;
						font-size: 24rpx;
						color: #2B2E33;
						// padding-left: 20rpx;
						text-align: left;
					}
					.item-input{
						position: relative;
						input{
							background-color: #eff3f7;
							line-height: 80upx;
							height: 80upx;
							border-radius: 10upx;
							padding-left: 30upx;
						}
						.items{
							position:absolute;
							line-height: 80upx;
							height: 80upx;
							right: 0;
							width: 50upx;
							top: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 9;
						}
					}
				}
				.exchange-btn{
					margin: 20upx 0;
					padding-bottom: 40upx;
					.btn{
						width: 300upx;
						padding:0 30upx;
						line-height: 67upx;
						height: 67upx;
						display: flex;
						background-color: #007AFF;
						border-radius:10upx;
						margin:0 auto;
						justify-content: center;
						align-items: center;
						color: #fff;
						&.active{
							transform: scale(.9);
							opacity: .9;
						}
					}
				}
				.bili{
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 94upx;
					margin:0 30upx;
					border-bottom: 2upx solid #DFDFDF;
					font-size: 24upx;
					color: #2B2E33;
					text{
						font-size: 22upx;
						color: #999999;
					}
				}
				.echange-switch-info{
					padding: 0 30upx;
					.echange-switch-info-item{
						display: flex;
						border-bottom: 1upx solid #efefef;
						padding:30upx 0;
						.item-left{
							flex: 1;
							display: flex;
							align-items: center;
							// justify-content: center;
							font-size: 26upx;
							image{
								flex-shrink: 0;
								width: 60upx;
								height: 60upx;
								margin-right: 10upx;
							}
						}
						.item-right{
							width: 140upx;
						}
					}
				}
				.exchange-title{
					line-height: 100upx;
					text-align: center;
					color: #202020;
					font-weight: bold;
					font-size: 27upx;
					position: relative;
					.exchange-title-btn{
						position: absolute;
						top: 20upx;
						right: 28upx;
						padding: 14upx 32upx;
						background-color: #1D7DFF;
						color: #FFFFFF;
						font-size:28upx;
						line-height: 28upx;
						border-radius:50upx;
					}
				}
				.con{
					display: flex;
					justify-content: space-between;
					padding: 0 33upx;
					.item-c{
						width: 104upx;
						justify-content: center;
						display: flex;
						align-items: center;
						view{
							padding:15upx;
							border: 2upx solid #007AFF;
							border-radius:50%;
							color: #007AFF;
							&.active{
								background-color: #007AFF;
								border:none;
								color: #FFFFFF;
								transform: scale(.9);
								opacity: .9;
							}
						}
					}
					.item{
						flex: 1;
						view{
							border: 2upx solid #A0A0A0;
							border-radius:10upx;
							margin-bottom: 30upx;
							text{
								color: #202020;
								font-size:22upx;
								display: block;
								padding:14upx 14upx 0;
								font-weight: bold;
								&:last-child{
									font-size:20upx;
									color: #a0a0a0;
									padding-top: 0;
									font-weight: 100;
									padding-bottom: 14upx;
								}
							}
							input{
								line-height: 70upx;
								height: 70upx;
								padding:0 15upx;
								color: #000000;
							}
						}
					}
				}
			}
			.list-content-title{
				color: #2D2D2D;
				font-weight: bold;
				font-size:28upx;
				margin: 46upx 30upx 33upx;
			}
			.list-content{
				background-color: #FFFFFF;
				border-top-left-radius: 20upx;
				border-top-right-radius: 20upx;
				padding:0 20upx;
				.list{
					display: flex;
					justify-content: space-between;
					padding:32upx 0;
					border-bottom: 2upx solid #D1D1D1;
					&:last-child{
						border-bottom:none;
					}
					.item-left{
						view{
							color: #2D2D2D;
							font-weight: bold;
							font-size:27upx;
						}
						text{
							color: #6D6D6D;
							font-size: 20upx;
						}
					}
					.item-right{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 23upx;
						&.active{
							color: #007AFF;
						}
					}
				}
			}
		}
	}
	
</style>
